<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—台账记录"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="编码" v-model="no"></LInput>
      <LInput label="名称" v-model="name" style="margin-left: 16px"></LInput>
      <LDateTimeSelect2 label="日期" :value="time" @time-event="getNewTime" style="margin-left: 16px"></LDateTimeSelect2>
      <LSelect label="物品类别" :value="type" :options="option1" @selected-event="getNewSelected1" style="margin-left: 16px"></LSelect>
      <LSelect label="仓库" :value="ware" :options="option2" @selected-event="getNewSelected2" style="margin-left: 16px"></LSelect>
    </section>
    <section class="search_bar">
      <LSelect label="库区" :value="kuqu" :options="option3" @selected-event="getNewSelected3" placeholder="请选择"></LSelect>
      <LSelect label="库存是否大于0" :value="kucun" :options="option4" @selected-event="getNewSelected4" style="margin-left: 16px"></LSelect>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
      <LButton label="导出数据" style="margin-left: 16px" @click="exportExcel"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData1" style="width: 100%" border :default-sort='{prop:"b",order:"ascending"}'>
      <el-table-column prop="b" label="物品编号" width="110" />
      <el-table-column prop="c" label="物品名称" />
      <el-table-column prop="d" label="规格型号" />
      <el-table-column prop="e" label="单价" />
      <el-table-column prop="f" label="数量" width="150" />
      <el-table-column prop="g" label="金额" />
      <el-table-column prop="h" label="仓库" />
      <el-table-column prop="i" label="库区" />
      <el-table-column prop="k" label="台账类型" />
      <el-table-column prop="l" label="关联单号" />
      <el-table-column prop="m" label="创建日期" />
      <el-table-column prop="n" label="操作人" width="110" />
    </el-table>
    <!-- 弹出框：报修 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="报修" width="40%" @close="repairDialogClose">
        <el-form label-width="80px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules">
          <div class="row">
            <div class="row-title">报修人信息</div>
            <div class="row-1">
              <el-form-item label="报修人" prop="name">
                <el-input v-model="repairForm.name"></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="报修电话" prop="tel">
                <el-input v-model="repairForm.tel"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog1 = true" />
              </el-form-item>
              <el-form-item label="报修单位" prop="bunit">
                <el-select v-model="repairForm.bunit" placeholder="请选择">
                  <el-option>报修单位aaa</el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="row">
            <div class="row-title">故障信息</div>
            <div class="row-1">
              <el-form-item label="维修项目" prop="pro">
                <el-input v-model="repairForm.pro"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog2 = true" />
              </el-form-item>
              <el-form-item label="维修单位" prop="wunit">
                <el-select v-model="repairForm.wunit" placeholder="请选择">
                  <el-option>维修单位bbbb</el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="故障位置" prop="position">
                <el-input v-model="repairForm.position"></el-input>
                <img src="@/assets/img/fdj.png" @click="repairDialog3 = true" />
                <div class="row-text">请填写故障位置，例如：1号楼2层3号房</div>
              </el-form-item>
            </div>
            <div style="padding: 0 2vw 0 0">
              <el-form-item label="故障描述" prop="script">
                <el-input v-model="repairForm.describe" type="textarea"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="repairSureBtn">报修</el-button>
            <el-button type="info" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框1：选择电话 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog1" title="选择电话" width="35%" @close="repairDialog1Close(row)" :rules="repairForm1Rules">
        <el-form ref="repairForm1Ref" :model="repairForm1" label-width="50px" size="small">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm1.search"></el-input>
          </el-form-item>
        </el-form>
        <el-table :data="subPopTable1" style="width: 100%" border ref="subPopTable1Ref" highlight-current-row @current-change="currentSelect1">
          <el-table-column prop="tel" label="电话" />
          <el-table-column prop="place" label="地点名称" />
          <el-table-column prop="describe" label="描述" />
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="200000">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="repairDialog1SureBtn">确定</el-button>
            <el-button type="info" @click="repairDialog1 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框2：选择维修事项 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog2" title="选择维修事项" width="35%" @close="repairDialog2Close">
        <el-form ref="repairForm2Ref" :model="repairForm2" label-width="75px" size="small" style="display: flex">
          <el-form-item label="搜索" prop="search" style="width: 40%">
            <el-input v-model="repairForm2.search"></el-input>
          </el-form-item>
          <el-form-item label="项目类别" prop="sort" style="width: 40%">
            <el-select v-model="repairForm2.sort">
              <el-option>全部</el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" style="height: 10px; margin-left: 15px">查询</el-button>
        </el-form>
        <el-table ref="subPopTable2Ref" :data="subPopTable2" highlight-current-row @current-change="currentSelect2" style="width: 100%" border>
          <el-table-column prop="proName" label="维修项目名称">
          </el-table-column>
          <el-table-column prop="proSoreName" label="项目类别名称">
          </el-table-column>
          <el-table-column prop="mark" label="备注"> </el-table-column>
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="22">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="repairDialog2SureBtn">确定</el-button>
            <el-button type="info" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框里的弹框3：选择故障位置 -->
    <div v-dialogdrag class="pop-2">
      <el-dialog v-model="repairDialog3" title="选择故障位置" width="35%" @close="repairDialog3Close">
        <el-form ref="repairForm3Ref" :model="repairForm3" label-width="50px" size="small" style="display: flex">
          <el-form-item label="搜索" prop="search" style="width: 50%">
            <el-input v-model="repairForm3.search"></el-input>
          </el-form-item>
          <el-button type="primary" size="small" style="height: 10px; margin-left: 15px">查询</el-button>
        </el-form>
        <el-table ref="subPopTable3Ref" :data="subPopTable3" highlight-current-row @current-change="currentSelect3" style="width: 100%" border>
          <el-table-column prop="proName" label="地点名称"> </el-table-column>
          <el-table-column prop="proSoreName" label="部门名称">
          </el-table-column>
          <el-table-column prop="mark" label="楼栋名称"> </el-table-column>
        </el-table>
        <el-pagination small background layout="prev, pager, next" :total="22">
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="repairDialog3SureBtn">确定</el-button>
            <el-button type="info" @click="repairDialog3 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";
import CsvExportor from "csv-exportor"; //导出csv

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LSelect,
  },
  data() {
    return {
      no: "",
      name: "",
      time: [],
      type: "1",
      ware: "1",
      kuqu: "",
      kucun: "1",

      option1: [
        { label: "全部", value: "1" },
        { label: "XXX", value: "2" },
      ],
      option2: [{ label: "仓库", value: "1" }],
      option3: [
        { label: "库区", value: "1" },
        { label: "库区2", value: "2" },
      ],
      option4: [
        { label: "是", value: "1" },
        { label: "否", value: "2" },
      ],

      tableData1: [
        {
          b: "03",
          c: "名称",
          d: "AASASDDF",
          e: "2.50",
          f: "100",
          g: "25",
          h: "仓库",
          i: "库区",
          k: "入库",
          l: "I0-2022-03-01-001",
          m: "2022-03-01 15:56:06",
          n: "lifa",
        },
      ],
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.now = moment().format("YYYY-MM-DD hh:mm:ss");
    }, 1 * 1000);
  },
  beforeUnmount() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    //获取时间
    getNewTime(t) {
      this.time = t;
    },
    //下拉框获取物品类型
    getNewSelected1(s) {
      this.type = s;
    },
    //下拉框获取仓库 子传父
    getNewSelected2(s) {
      this.ware = s;
    },
    //下拉框获取领用科室 子传父
    getNewSelected3(s) {
      this.kuqu = s;
    },
    //下拉框获取库存>0 子传父
    getNewSelected4(s) {
      this.kucun = s;
    },
    //重置条件
    clearSelected() {
      this.no = "";
      this.name = "";
      this.time = [];
      this.type = "1";
      this.ware = "1";
      this.kuqu = "";
      this.kucun = "1";
    },
    //导出
    exportExcel() {
      console.log("导出数据按钮点击~~~");
      let tableData = this.tableData1;
      let header = [
        " 物品编号",
        "物品名称",
        "规格型号",
        "单价",
        "数量",
        "金额",
        "仓库",
        "库区",
        "台账类型",
        "关联单号",
        "创建日期",
        "操作人",
      ];
      CsvExportor.downloadCsv(tableData, { header }, "台账记录.xls");
      console.log("导出数据按钮点击结束~~~");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row {
  border: 1px solid RGBA(255, 255, 255, 1);
  padding: 3vh 0 0 0;
  position: relative;

  &:last-child {
    margin-top: 5vh;
  }

  .row-title {
    text-align: center;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: RGBA(255, 255, 255, 1);
    position: absolute;
    left: 1vw;
    top: -1.6vh;
  }

  .row-text {
    display: inline-block;
    width: 250px;
    color: red;
    position: absolute;
    margin-left: 2vw;
  }

  .row-1 {
    display: flex;
    justify-content: space-between;
    padding: 0 2vw 0 0;
  }
}

// 表格内图片样式
/deep/ .el-form {
  img {
    position: absolute;
    margin-left: 0.2vw;
    margin-top: 0.5vh;
  }
}
</style>
